<!DOCTYPE html>
<html>
<head>
    @include("/include/_header.html", {'title':'测试背景'}){}
    <meta charset="utf-8">
    <title>全端复杂组合</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctxPath}/baotou-steel/craneWork/css/CraneWorkPublic.css" media="all">
    <script src="${ctxPath}/externaljs/sockjs/sockjs.min.js"></script>
    <script src="${ctxPath}/externaljs/stompjs/stomp.min.js"></script>
    <script src="${ctxPath}/externaljs/websocket/app-websocket.js"></script>
    <script type="text/javascript">
        let craneType = "5#横移";
        connect();
        //订阅任务信息
        setTimeout(function () {
            subscribePlcData(craneType);
        }, 1000);
    </script>
</head>
<body>
        <div class="layui-row rowMarTop">
            <div class="layui-col-md12">
                <div class="layui-card" style="height : 18vh">
                    <div class="layui-card-header head-font headText">公共条件</div>
                    <div class="layui-card-body">
                        <div class="marTop">
                            <div class="layui-col-md1">
                                <div class="greyLight" id="zdDY"></div>
                            </div>
                            <div class="layui-col-md1">
                                <div class="greyLight" id="sdDY"></div>
                            </div>
                            <div class="layui-col-md1">
                                <div class="greyLight" id="ycDY"></div>
                            </div>
                            <div class="layui-col-md1">
                                <div class="greyLight" id="bdDY"></div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md1">
                                    <div class="itemText">自动模式</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">手动模式</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">远程模式</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">本地模式</div>
                                </div>
                            </div>
                        </div>
                        <div class="marTop">
                            <div class="layui-row">
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="zhDY"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="zhJChQ"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="zhCh"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="dChDY"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="qShDY"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="mXW1"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="mXW2"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="chShTX"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="dJTX"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="shCTX"></div>
                                </div>

                                <div class="layui-col-md1">
                                    <div class="greyLight" id="TXGZ"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="ZCSDGD"></div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md1">
                                    <div class="itemText">主电源</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">主接触器</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">重锤</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">大车电源</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">起升电源</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">门限位1</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">门限位2</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">车上通信</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">吊具通信</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">上层通信</div>
                                </div>

                                <div class="layui-col-md1">
                                    <div class="itemText">通讯故障</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">整车供电失电</div>
                                </div>

                            </div>
                        </div>

                        <div class="marTop">
                            <div class="layui-row">
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="JPTXGZSD"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="JPJTSD"></div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="greyLight" id="DZJGZTYC"></div>
                                </div>




                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md1">
                                    <div class="itemText">机旁通讯故障失电</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">机旁急停失电</div>
                                </div>
                                <div class="layui-col-md1">
                                    <div class="itemText">对中机构状态异常</div>
                                </div>




                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row rowMarTop">
            <div class="layui-col-md12">
                <div class="layui-card" style="height : 18vh">
                    <div class="layui-card-header head-font headText">大车条件</div>
                    <div class="layui-card-body">
                        <div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="bP1GZh"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="bP2GZh"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="zXW"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="yXW"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dmmxw1"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dmmxw2"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dmmxw3"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dcmxw"></div>
                            </div>

                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="DCJGCJ1TXGZ"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="DCJGCJ2TXGZ"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="DCDWGZ"></div>
                            </div>
                        </div>
                        <div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">变频1故障</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">变频2故障</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">左限位</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">右限位</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">地面门限位1</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">地面门限位2</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">地面门限位3</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">登车门限位</div>
                            </div>

                            <div class="layui-inline bigCar">
                                <div class="itemText">大车激光测距1通讯故障</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">大车激光测距2通讯故障</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">大车定位故障</div>
                            </div>

                        </div>
                        <div>
                            <div class="layui-inline bigCar">
                                <div class="itemText redColor" id="bP1GZhCode" ></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText redColor" id="bP2GZhCode" ></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row rowMarTop">
            <div class="layui-col-md12">
                <div class="layui-card" style="height : 18vh">
                    <div class="layui-card-header head-font headText">起升条件</div>
                    <div class="layui-card-body">
                        <div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="qShBP1GZh"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="qShBP2GZh"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dX1ShXW"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dX2ShXW"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dCDJJ1"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dCDJJ2"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dCDJX1"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="dCDJX2"></div>
                            </div>


                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="BMQYC"></div>
                            </div>

                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="QSBMQ1TXGZ"></div>
                            </div>

                            <div class="layui-inline bigCar">
                                <div class="greyLight" id="QSBMQ2TXGZ"></div>
                            </div>
                        </div>
                        <div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">变频1故障</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">变频2故障</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">导向1上限位</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">导向2上限位</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">电磁吊接近1</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">电磁吊接近2</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">电磁吊极限1</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">电磁吊极限2</div>
                            </div>

                            <div class="layui-inline bigCar">
                                <div class="itemText">编码器异常</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">起升编码器1通讯故障</div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText">起升编码器2通讯故障</div>
                            </div>

                        </div>
                        <div>
                            <div class="layui-inline bigCar">
                                <div class="itemText redColor" id="qShBP1GZhCode"></div>
                            </div>
                            <div class="layui-inline bigCar">
                                <div class="itemText redColor" id="qShBP2GZhCode"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row rowMarTop">
            <div class="layui-col-md12">
                <div class="layui-card" style="height : 18vh">
                    <div class="layui-card-header head-font headText">电磁故障</div>
                    <div class="layui-card-body">
                        <div class="marTop">
                            <div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="chDXTGZh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="lCXTGZh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="chDTXGZh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="dDY"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="MFMCTXGZh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="fZ12TXGZh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="fZ34TXGZh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="dDL"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="fZ56TXGZh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="fZ78TXGZh"></div>
                                </div>
                            </div>
                            <div>
                                <div class="layui-inline fault">
                                    <div class="itemText">充电系统故障</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">励磁系统故障</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">充电通信故障</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">低电压</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">MF MC通信故障</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">分组12通信故障</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">分组34通信故障</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">低电流</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">分组56通信故障</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">分组78通信故障</div>
                                </div>
                            </div>
                        </div>
                        <div class="marTop">
                            <div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="shNWDD"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="xLChSh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="dChQSh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="dChDYD"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="chDGY"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="lCGL"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="chDGL"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="jLGZh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="lCZhBGZh"></div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="greyLight" id="bCTR"></div>
                                </div>
                            </div>
                            <div>
                                <div class="layui-inline fault">
                                    <div class="itemText">使能位掉电</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">吸料超时</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">电池缺失</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">电池电压底</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">充电过压</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">励磁过流</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">充电过流</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">交流故障</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">励磁主板故障</div>
                                </div>
                                <div class="layui-inline fault">
                                    <div class="itemText">保磁投入</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
<style>
    .greenLight {
        margin: 0 auto;
        background: green;
        border-radius:20px;
        height:40px;
        width: 40px;
        /*box-shadow: 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 70px #ff00de
        ,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
        box-shadow: 0 0 10px #fff, 0 0 20px #7FFF00, 0 0 30px #7FFF00, 0 0 40px #7FFF00, 0 0 70px #7FFF00
    }
    .redLight {
        margin: 0 auto;
        background: red;
        border-radius:20px;
        height:40px;
        width: 40px;
        /*box-shadow: 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 70px #ff00de
        ,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
        box-shadow: 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 70px #ff00de
    }
    .itemText{
        margin-top: 12px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }
    .redColor{
        color: red;
    }
    .headText{
        text-align: center;
        font-size: 26px;
        font-weight: bold;
    }
    .bigCar{
        width: 180px;
    }
    .fault{
        width: 160px;
    }
    .marTop{
        margin-top: 14px;
    }
    .rowMarTop{
        margin-top: 20px;
    }
</style>
</html>